/**
 * Created by Will Bean on 2016/4/24.
 */
import React, {Component} from 'react'
//import fetch from 'isomorphic-fetch'
import CheckboxInput from './CheckboxInput'
import InputWithLabel from './InputWithLabel'
import TextInput from './TextInput'
import TextareaInput from './TextareaInput'
import SelectInput from './SelectInput'
import FileInput from './FileInput'
import ImageWithState from './ImageWithState'

var map;
var myGeo;
var addIndex = 0;//判断是第几个加入的服务
var serviceIdList = [];//服务保存后存入meta
var ShopGeoIndex = null;

import {myAjax, ROOTURL} from '../publicAPI/publicAPI'

import style from './addStore.css'

class StoreEditor extends Component {
    constructor() {
        super();
        this.state = {
            storeName: "",
            servicePhone: "",
            storeAddress: "",
            coordinateLon: "",
            coordinateLat: "",
            startHour: "08",
            startMinute: "00",
            endHour: "18",
            endMinute: "00",
            manager : "",
            checkbox8: true,
            storeIntroduction: "",
            previewImgFiles: [],
            previewImgUrl: [],
            hasBeenMounted: false,  //判断是否已经加载
            delete: false,
            imgHash: [],
            serviceList: []
        };
        this.handleImgUpload.bind(this);
    }

    componentWillMount() {
        serviceIdList = [];
        addIndex = 0;
        ShopGeoIndex = null;

        console.log("将安装", this.props.params.id);

        if (this.props.params.id != "undefine") {
            //    根据参数获取数据

            if (!this.state.hasBeenMounted && this.props.params.id) {
                console.log('set finished');
                this.handleGetInfo();
            }
        }
    }

    componentDidMount() {
        var _this = this;
        map = new BMap.Map("map");
        var marker;
        myGeo = new BMap.Geocoder();
        var point = new BMap.Point(this.state.coordinateLon, this.state.coordinateLat);
        map.centerAndZoom(point, 18);
        map.addOverlay(new BMap.Marker(point));
        function showInfo(e) {
            // map.removeOverlay(marker);
            map.clearOverlays();
            _this.setState({
                coordinateLon: e.point.lng,
                coordinateLat: e.point.lat
            });
            var point = new BMap.Point(e.point.lng, e.point.lat); // 创建点坐标
            marker = new BMap.Marker(point); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中
        }

        map.addEventListener("click", showInfo);
    }

    handleGetInfo() {
        var url = ROOTURL + 'shop/instance.api?id=' + this.props.params.id;
        var _this = this;
        fetch(url, {
            method: "Get"
        }).then(res=> {
            if (res.ok) {
                res.json().then(data=> {
                    console.log(data);
                    _this.setState({
                        storeName: data.dname,
                        storeAddress: data.meta.address,
                        startHour: parseInt(data.tmOpen / 3600000),
                        startMinute: _this.getMinute(data.tmOpen),
                        endHour: parseInt(data.tmClose / 3600000),
                        endMinute: _this.getMinute(data.tmClose),
                        checkbox8: data.stActivate,
                        servicePhone: data.meta.phone,
                        storeIntroduction: data.meta.description,
                        imgHash: data.meta.hashed,
                        coordinateLon: data.meta.coordinateLon,
                        coordinateLat: data.meta.coordinateLat,
                        manager : data.meta.manager
                    });

                    var point = new BMap.Point(data.meta.coordinateLon, data.meta.coordinateLat);
                    map.centerAndZoom(point, 18);


                        var geoIndexId = data.meta.geoIndexId;
                        fetch(ROOTURL + 'shop/geo-index/instance.api?id=' + _this.props.params.id,{
                            method : 'get'
                        }).then(res=>{
                            if(res.ok)
                                return res.json();
                        }).then(data=>{
                            if(data)
                                ShopGeoIndex = data;
                        });


                    fetch(ROOTURL + 'serv/shop/search.api?id=' + _this.props.params.id, {
                        method: 'post',
                        body: JSON.stringify({
                            "where": {"shopId": [["eq", this.props.params.id]]}
                        })
                    }).then(res=> {
                        if (res.ok) {
                            res.json().then(data => {
                                console.log(data)
                                _this.setState({
                                    serviceList: data
                                });
                            })
                        }
                    })

                    console.log(_this.state)
                })
            }
        });


    }

    getMinute(hour) {
        var m = parseInt((hour - parseInt(parseInt(hour / 3600000) * 3600000)) / 60000);
        var fm = m + '';
        if (m < 10) {
            fm = "0" + m;
        }
        return fm;
    }

    handlerLocationChange() {
        var _this = this;
        myGeo.getPoint(this.state.storeAddress, function (point) {
            if (point) {
                map.centerAndZoom(point, 18);
                map.addOverlay(new BMap.Marker(point));
                _this.setState({
                    coordinateLon: point.lng,
                    coordinateLat: point.lat
                });
            } else {
                alert("您选择地址没有解析到结果!");
            }
        }, "广东省");
    }

    handleImgUpload(files) {
        var fileUrl = [];
        var _this = this;
        files.map(file=> {
            var freader = new FileReader();
            freader.readAsDataURL(file);
            freader.onload = function (e) {
                fileUrl.push({src: e.target.result});

                //因异步操作存在多次渲染，待修改
                _this.setState(Object.assign({}, this.state, {
                    previewImgFiles: files,
                    previewImgUrl: fileUrl
                }));
            };

        });

    }

    createStore() {
        var _this = this;
        var point = new BMap.Point(this.state.coordinateLon, this.state.coordinateLat);
        myGeo.getLocation(point, function(result){
            if (result){
                var meta = {
                    phone: _this.state.servicePhone,
                    description: _this.state.storeIntroduction,
                    hashed: _this.state.imgHash,
                    coordinateLon: _this.state.coordinateLon,
                    coordinateLat: _this.state.coordinateLat,
                    serviceIdList: serviceIdList,
                    address : _this.state.storeAddress,
                    manager : _this.state.manager
                };
                var data = {
                    dname: _this.state.storeName,
                    loc: _this.encodeGeoHash(_this.state.coordinateLat, _this.state.coordinateLon),
                    tmOpen: parseInt(_this.state.startHour) * 3600000 + parseInt(_this.state.startMinute) * 60000,
                    tmClose: parseInt(_this.state.endHour) * 3600000 + parseInt(_this.state.endMinute) * 60000,
                    dd: false,
                    stActivate: _this.state.checkbox8,
                    meta: meta
                };
                var url;
                if (_this.props.params.id) {
                    url = ROOTURL + 'shop/instance.api?id=' + _this.props.params.id;
                    data.id = _this.props.params.id
                } else {
                    url = ROOTURL + 'shop/instance.api'
                }
                fetch(url, {
                    method: 'POST',
                    body: JSON.stringify(data)
                }).then(function (res) {
                    if (res.ok) {
                        res.json().then(function (dd) {
                            var addComp = result.addressComponents;

                            var geoData = {
                                shop : _this.props.params.id || dd.id,
                                cc : "86",
                                c1 : addComp.province,
                                c2 : addComp.city,
                                c3 : addComp.district,
                                c4 : addComp.street,
                                deetAddr : addComp.street + addComp.streetNumber,
                                pc : "",
                                cphone : _this.state.servicePhone,
                                cname : _this.state.manager,
                                lat : _this.state.coordinateLat,
                                lon : _this.state.coordinateLon,
                                fullAddr : _this.state.storeAddress
                            };
                            if(ShopGeoIndex != null){
                                geoData.id = _this.props.params.id
                            }

                            fetch(ROOTURL + "shop/geo-index/instance.api",{
                                method : 'post',
                                body: JSON.stringify(geoData),
                                // mode : "no-cors"
                            }).then(geoRes=>{
                                if(geoRes.ok){
                                    console.log('保存成功');
                                    alert('保存成功!');
                                    location.href = '/StoreM';
                                }
                            })
                        })
                    } else {
                        console.log(res.status)
                    }
                }).catch(function (error) {
                    console.log('Request failed', error);
                });

            }else{
                alert("BAIDU GEOMAP 解析出错")
            }
        });
    }

    handlesave() {
        var _this = this;
        const imgfile_url = this.state.previewImgUrl;
        const imgfiles = this.state.previewImgFiles;
        var j = 0;
        for (var i = 0; i < imgfiles.length; i++) {
            var img = new Image();
            img.src = imgfile_url[i].src;
            const width = img.width;
            const height = img.height;
            console.log(width, height);
            var fd = new FormData();
            var xhr = new XMLHttpRequest();
            xhr.open("POST", ROOTURL + "asset/images/upload.api?width=" + width + "&height=" + height + "&noShrink=" + true);
            var f = imgfiles[i];
            fd.append("file", f);
            xhr.send(fd);
            xhr.onload = function (data) {
                var status = data.currentTarget.status;
                if (status == 200) {
                    var imageList = _this.state.previewImgUrl;
                    var imgData = _this.state.previewImgUrl[j];
                    imageList[j] = imgData;
                    imgData.msg = '保存成功';
                    _this.setState({
                        previewImgUrl: imageList
                    });
                    j++;

                    var res = data.currentTarget.response;
                    var res_json = JSON.parse(res);
                    var res_hashed = res_json.hashed;
                    _this.setState({
                        imgHash: _this.state.imgHash.concat(res_hashed)
                    });

                    if (j == imgfiles.length) {
                        _this.createStore();
                    }
                }
                else {
                    var imageList = _this.state.previewImgUrl;
                    var imgData = _this.state.previewImgUrl[j];
                    imageList[j] = imgData;
                    imgData.msg = '保存失败';
                    _this.setState({
                        previewImgUrl: imageList
                    });
                    j++;

                    if (j == imgfiles.length) {
                        _this.createStore();
                    }
                }
            }
        }
        if (!imgfiles.length) {
            _this.createStore();
        }
    }

    handleStoreDelete() {
        var url = ROOTURL + 'shop/instance.api?id=' + this.props.params.id;
        this.setState({
            delete: !this.state.delete
        });
        fetch(url, {
            method: 'delete',
            // mode : 'no-cors',
            body: JSON.stringify({})
        }).then(res=> {
            if (res.ok) {
                res.json().then(data=> {
                    console.log(data);
                })
            }
        })
    }

    deleteImg(key) {
        var newFiles = this.state.imgHash;
        newFiles.splice(key, 1);
        this.setState({
            imgFiles: newFiles
        })
    }

    getOptions(data) {
        var options = [];
        options.push(data.map((e, index)=><option key={index} value={e}>{e}</option>));
        return options;
    }

    isEmptyObject(e) {
        var t;
        for (t in e)
            return !1;
        return !0
    }


    createAndUpdateService(shopId) {
        let count = 0;
        var _this = this;
        if (this.state.serviceList.length <= 0) {
            alert('保存成功!');
            location.href = '/StoreM'
        }
        this.state.serviceList.map((ser, i)=> {
            if (this.isEmptyObject(ser)) {
                count++;
                return;
            }
            let url;
            let data = {};
            if (ser.id) {
                url = ROOTURL + 'serv/shop/instance.api?id=' + ser.id;
                data = {
                    name: ser.name,
                    dname: ser.dname,
                    serviceProtype: ser.serviceProtype,
                    dd: ser.dd,
                    shop: shopId,
                    duration: ser.duration,
                    cost0: ser.cost0,
                    workload: ser.workload,
                    id: ser.id
                };
            } else {
                url = ROOTURL + 'serv/shop/instance.api';
                data = {
                    name: ser.name,
                    dname: ser.dname,
                    serviceProtype: ser.serviceProtype,
                    dd: ser.dd,
                    shop: shopId,
                    duration: ser.duration,
                    cost0: ser.cost0,
                    workload: ser.workload
                };
            }

            fetch(url, {
                method: "POST",
                body: JSON.stringify(data)
            }).then(res=> {
                if (res.ok) {
                    res.json().then(data=> {
                        serviceIdList.push(data.id);
                        if (++count == _this.state.serviceList.length) {
                            console.log('服务更新成功');
                            alert('保存成功!');
                            location.href = '/StoreM'
                        }
                    });
                } else {
                    console.log('服务更新出错')
                }
            })
        });
    }

    handleAddService() {
        var serlist = this.state.serviceList;
        this.setState({
            serviceList: serlist.concat({addIndex: addIndex})
        });
        addIndex++;
    }

    setServiceList(val, id, type, addIndex) {
        var newSerList = this.state.serviceList;
        newSerList.forEach((ser, index)=> {
            if (ser.id && ser.id == id) {
                ser[type] = val;
                this.setState({
                    serviceList: newSerList
                });
            } else if (!ser.id && ser.addIndex == addIndex) {
                ser[type] = val;
                this.setState({
                    serviceList: newSerList
                });
            }
        })
    }

    encodeGeoHash(latitude, longitude) {
        var BITS = [16, 8, 4, 2, 1];

        var BASE32 = 											   "0123456789bcdefghjkmnpqrstuvwxyz";
        var NEIGHBORS = { right  : { even :  "bc01fg45238967deuvhjyznpkmstqrwx" },
            left   : { even :  "238967debc01fg45kmstqrwxuvhjyznp" },
            top    : { even :  "p0r21436x8zb9dcf5h7kjnmqesgutwvy" },
            bottom : { even :  "14365h7k9dcfesgujnmqp0r2twvyx8zb" } };
        var BORDERS   = { right  : { even : "bcfguvyz" },
            left   : { even : "0145hjnp" },
            top    : { even : "prxz" },
            bottom : { even : "028b" } };
        var is_even = 1;
        var i = 0;
        var lat = [];
        var lon = [];
        var bit = 0;
        var ch = 0;
        var precision = 12;
        var geohash = "";

        lat[0] = -90.0;
        lat[1] = 90.0;
        lon[0] = -180.0;
        lon[1] = 180.0;

        while (geohash.length < precision) {
            if (is_even) {
                var mid = (lon[0] + lon[1]) / 2;
                if (longitude > mid) {
                    ch |= BITS[bit];
                    lon[0] = mid;
                } else
                    lon[1] = mid;
            } else {
                var mid = (lat[0] + lat[1]) / 2;
                if (latitude > mid) {
                    ch |= BITS[bit];
                    lat[0] = mid;
                } else
                    lat[1] = mid;
            }

            is_even = !is_even;
            if (bit < 4)
                bit++;
            else {
                geohash += BASE32[ch];
                bit = 0;
                ch = 0;
            }
        }
        return geohash;
    }

    drawService(data, i) {
        return (null
            // <tr key={i} className={style.serviceTr}>
            //     <td><TextInput textClass={style.serviceText} placeHolder="服务的内部命名" val={data.name}
            //                    onChange={val=>{this.setServiceList(val,data.id,'name', data.addIndex)}}/></td>
            //     <td><TextInput textClass={style.serviceText} placeHolder="服务的显示命名" val={data.dname}
            //                    onChange={val=>this.setServiceList(val,data.id,'dname', data.addIndex)}/></td>
            //     <td><SelectInput selectClass={style.tselect} optionsData={this.getOptions(['1'])} //获取全部服务原型
            //                      val={data.serviceProtype}
            //                      onChange={val=>this.setServiceList(val,data.id,'serviceProtype', data.addIndex)}
            //                      onChange={val=>this.setState({startHour: val})}/></td>
            //     <td><TextInput textClass={style.serviceText} placeHolder="服务预计耗时" val={data.duration}
            //                    onChange={val=>this.setServiceList(val,data.id,'duration', data.addIndex)}/></td>
            //     <td><TextInput textClass={style.serviceText} placeHolder="服务基础售价" val={data.cost0}
            //                    onChange={val=>this.setServiceList(val,data.id,'cost0', data.addIndex)}/></td>
            //     <td><TextInput textClass={style.serviceText} placeHolder="并行工作负担" val={data.workload}
            //                    onChange={val=>this.setServiceList(val,data.id,'workload', data.addIndex)}/></td>
            //     <td><label className={style.serviceLabel}>废弃</label><CheckboxInput checkboxClass={style.serviceCheckbox}
            //                                                                        isCheck={data.dd}
            //                                                                        onChange={val=>this.setServiceList(val,data.id,'dd', data.addIndex)}/>
            //     </td>
            //     {}
            // </tr>

            // <tr key={i}>
            //     <td><TextInput textClass={style.serviceText} placeHolder="服务的内部命名" val={this.state['name'+i]} onChange={val=>{let s = {};s['name'+i] = val;this.setState(s);}}/></td>
            //     <td><TextInput textClass={style.serviceText} placeHolder="服务的显示命名" val={this.state['dname'+i]} onChange={val=>{let s = {};s['dname'+i] = val;this.setState(s);}}/></td>
            //     <td><SelectInput selectClass={style.tselect} optionsData={this.getOptions(['1'])} val={this.state.startHour}//获取全部服务原型
            //                      onChange={val=>this.setState({startHour: val})}/></td>
            //     <td><TextInput textClass={style.serviceText} placeHolder="服务预计耗时" val={this.state['duration'+i]} onChange={val=>{let s = {};s['duration'+i] = val;this.setState(s);}}/></td>
            //     <td><TextInput textClass={style.serviceText} placeHolder="服务基础售价" val={this.state['cost0'+i]} onChange={val=>{let s = {};s['cost0'+i] = val;this.setState(s);}}/></td>
            //     <td><TextInput textClass={style.serviceText} placeHolder="并行工作负担" val={this.state['workload'+i]} onChange={val=>{let s = {};s['workload'+i] = val;this.setState(s);}}/></td>
            //     <td><label>废弃</label><CheckboxInput isCheck={this.state['dd'+i]} onChange={val=>{let s = {};s['dd'+i] = val;this.setState(s);}}/></td>
            // </tr>
        )
    }

    render() {
        const optionData1 = ["08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
            optionData2 = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"];
        return (
            <div className="right-wrap">
                <div className="wrap" style={{position:'relative'}}>
                    <div className={style['input_div']}>
                        <label>门店名</label>
                        <TextInput inputId="name" placeHolder="请输入门店名" val={this.state.storeName}
                                   onChange={val=>this.setState({storeName: val})}/>
                    </div>
                    <div className={style['input_div']}>
                        <label>负责人</label>
                        <TextInput inputId="name" placeHolder="请输入负责人姓名" val={this.state.manager}
                                   onChange={val=>this.setState({manager: val})}/>
                    </div>
                    <div className={style['input_div']}>
                        <label>客服电话</label>
                        <TextInput inputId="phone" placeHolder="请输入客服电话" val={this.state.servicePhone}
                                   onChange={val=>this.setState({servicePhone: val})}/>
                    </div>

                    <div className={style['input_div']} id="address">
                        <label>门店地址</label>
                        <TextInput inputId="place" placeHolder="请输入门店地址" val={this.state.storeAddress}
                                   onChange={val=>this.setState({storeAddress: val})}/>
                        <button id="mapSearch" className={style['main_btn']}
                                style={{backgroundColor: '#2285c7',border: '1px solid #1e77b3'} }
                                onClick={this.handlerLocationChange.bind(this)}>查找
                        </button>
                    </div>
                    <div className={style['input_div']}>
                        <label>门店坐标</label>
                        <TextInput inputId="lon" placeHolder="经度" style={{width:"140px"}} val={this.state.coordinateLon}
                                   onChange={val=>this.setState({coordinateLon: val})}/>
                        <TextInput inputId="lat" placeHolder="纬度" style={{width:"140px", marginLeft:"3px"}}
                                   val={this.state.coordinateLat} controlValue={this.state.coordinateLat}
                                   onChange={val=>this.setState({coordinateLat: val})}/>

                    </div>
                    <div className={style['input-div']} style={{display:'none'}}>
                        <label>理发师</label>
                    </div>
                    <div id="map" className={style.map}></div>
                    <div className={style['input_div']}>
                        <label>营业时间</label>
                        <div className={style['dpib']}>
                            <SelectInput id="h1" selectClass={style.tselect} optionsData={this.getOptions(optionData1)}
                                         val={this.state.startHour}
                                         onChange={val=>this.setState({startHour: val})}/>
                            时
                            <SelectInput id="m1" selectClass={style.tselect} optionsData={this.getOptions(optionData2)}
                                         val={this.state.startMinute}
                                         onChange={val=>this.setState({startMinute: val})}/>
                            分——
                            <SelectInput id="h2" selectClass={style.tselect} optionsData={this.getOptions(optionData1)}
                                         val={this.state.endHour}
                                         onChange={val=>this.setState({endHour: val})}/>
                            时
                            <SelectInput id="m2" selectClass={style.tselect} optionsData={this.getOptions(optionData2)}
                                         val={this.state.endMinute}
                                         onChange={val=>this.setState({endMinute: val})}/>
                            分
                        </div>
                    </div>
                    <div className={style['input_div']}>
                        <label>门店介绍</label>
                        <TextareaInput id="intro" val={this.state.storeIntroduction}
                                       onChange={val=>this.setState( {storeIntroduction: val})}/>
                    </div>
                    <div className={style['input_div']}>
                        <label />
                        <span className={style['tips']}>修改营业时间后，请到“排班管理”重新排班</span>
                    </div>
                    {// <div className={style['input_div']}>
                        //     <label>服务类型</label>
                        //     <button id="addService" className={style['main_btn']}
                        //             style={{backgroundColor: '#2285c7',border: '1px solid #1e77b3'} }
                        //             onClick={this.handleAddService.bind(this)}>添加服务类型
                        //     </button>
                        //     <div className="service_box">
                        //         <table>
                        //             <tbody>
                        //             {this.state.serviceList.map((ser, i)=> {
                        //                 console.log(ser);
                        //                 return this.drawService(ser, i)
                        //             })}
                        //             </tbody>
                        //         </table>
                        //     </div>
                        // </div>
                    }
                    <div className={style['checkbox_div']}>
                        <CheckboxInput id="enabled" isCheck={this.state.checkbox8}
                                       onChange={val=>this.setState({checkbox8: val})}/>
                        <label htmlFor="enabled">启用</label>
                    </div>

                    <span id="hint"/>
                    <button id="submit" className={style['main_btn']}
                            style={{backgroundColor: '#2285c7',border: '1px solid #1e77b3'} }
                            onClick={this.handlesave.bind(this)}>保存
                    </button>
                    {this.props.params.id ? <button id="delete" className={style['main_btn']}
                                                    style={{backgroundColor: '#f2846f',border: '1px solid #d55c44'} }
                                                    onClick={()=>this.setState({delete: !this.state.delete})}>
                        删除</button> : null}
                    <button id="back" className={style['main_btn']}
                            style={{backgroundColor: '#2285c7',border: '1px solid #1e77b3'} }
                            onClick={()=>history.back()}>返回
                    </button>
                </div>
                <div className="wrap">

                    <button id="upload" className={style['main_btn']}
                            style={{backgroundColor: '#2285c7',border: '1px solid #1e77b3'} }>图片选择上传 <FileInput
                        type="file"
                        fileClass={style['imgUploader-btn']}
                        accept=".jpg,.png,.jpeg,.gif,.bmp"
                        onChange={(files)=>this.handleImgUpload(files)}/>
                    </button>
                    <span className={style['tips']} style={{marginLeft:"10px",display:'inline-block'}}>每次上传和删除图片后，请点击上方“保存”按钮进行保存</span>

                    <h3 className='catagory' style={{marginTop:"10px"}}><span className='cata-title'>上传图片列表</span></h3>
                    <ul id="fileList" className={style['img_list']}>
                        {this.state.previewImgUrl.length > 0 ? this.state.previewImgUrl.map((img, index)=> {
                            return <ImageWithState src={img.src} stateMsg={img.msg} id={index} key={index}/>
                        }) : null}
                    </ul>

                    <h3 className='catagory' style={{marginTop:"10px"}}><span className='cata-title'>门店图片列表</span></h3>
                    <ul id="imglist" className={style['img_list']}>
                        {this.state.imgHash.length > 0 ? this.state.imgHash.map((url, index)=> {
                            var src = ROOTURL + 'asset/images/get.api?hashed=' + url;
                            return <ImageWithState onClick={this.deleteImg.bind(this,index)} src={src}
                                                   deleteBtn={true} key={index}/>

                        }) : null}
                    </ul>
                </div>

                { this.state.delete ?
                    <div id={style.msgDialog}>
                        <div className={style['msgDialog_div']}><h3 id={style['msgDialog_title']}>删除提示？</h3><p
                            id={style['msgDialog_content']}>确认删除？</p>
                            <div className={style['msgDialog_button']}>
                                <button id={style['msgDialog_yes']} onClick={this.handleStoreDelete.bind(this)}>确定
                                </button>
                                <button id={style['msgDialog_no']}
                                        onClick={()=>this.setState({delete: !this.state.delete})}>取消
                                </button>
                            </div>
                        </div>
                    </div> : null}
            </div>
        )
    }
}

export default StoreEditor
